<script setup lang="ts">
  import { ref, watch, computed } from 'vue';
  import { ERPFuncLogParam } from '@/api/operation-monitoring/types';
  import { ERPFuncLog } from '@/api/operation-monitoring';

  const props = defineProps<{
    msgIdData: any;
  }>();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'PAGEHELPER_ROW_ID',
      key: 'PAGEHELPER_ROW_ID',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '传输标识',
      dataIndex: 'msgId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '类型',
      dataIndex: 'issuedType',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '操作结果代码',
      dataIndex: 'retCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '返回时间',
      dataIndex: 'creationDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'ERP返回结果',
      dataIndex: 'bData',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '操作结果',
      dataIndex: 'result',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];
  // 创建一个响应式的本地副本
  const localTableData = ref<any>();
  const flowQueryData = computed<ERPFuncLogParam>(() => ({
    queryParam: {
      msgId: props.msgIdData,
    },
    page: {
      currentPage: 1,
      pageSize: 20,
      total: 0,
      pageRandom: [50, 100, 500],
    },
  }));
  async function handleSearch() {
    const response = await ERPFuncLog(flowQueryData.value);
    if (response.list) {
      localTableData.value = response.list;
    }
  }
  watch(
    () => props.msgIdData,
    () => {
      if (props.msgIdData) {
        handleSearch();
      }
    },
    { immediate: true }
  );
</script>

<template>
  <div>
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
      row-key="PAGEHELPER_ROW_ID"
    >
    </a-table>
  </div>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
